(function () {
  "use strict";
  // 顶部固定搜索栏
  const fixedsearch = document.getElementById("fixed-header");
  window.addEventListener("scroll", function () {
    if (document.documentElement.scrollTop > document.documentElement.clientHeight) {
      move(fixedsearch, { top: 0 });
    } else {
      move(fixedsearch, { top: -95 });
    }
  });
  // 分类栏目
  $(window).on("load", () => {
    $.ajax({
      url: "./json/list.json",
      dataType: "json",
      success: (res) => {
        $("#columns").find("nav").on("mouseover", function(eve) {
            const e = eve || window.event;
            let target = e.target || e.srcElement || e.toElememt;
            if (target.tagName === "LI") {
              renderlist(res[target.getAttribute("index")]);
              $(".abc").css("display", "block");
              $(target).on("mouseleave", () => {
                $(".abc").css("display", "none");
                $(".abc").hover(() => {$(".abc").css("display", "block");},() => {$(".abc").css("display", "none");});
              });
            }
          });
      },
    });
    function renderlist(res) {
      let liststr = "";
      let listinner = "";
      for (var j = 0; j < res.length; j++) {
        let arr = res[j].split(",");
        liststr = "";
        for (var m = 0; m < arr.length; m++) {
          liststr += `<a href="#">${arr[m]}</a>`;
        }
        listinner += `<li>${liststr}</li>`;
      }
      $(".classify").html(listinner);
    }

// 商品渲染
    $.ajax({
      url: "./json/goods-list.json",
      dataType: "json",
      success: (res) => {
        rendergoods(res);
      },
    });
    function rendergoods(res) {
      let goodstr = "";
      for (var i = 0; i < $(".cont1").length; i++) {
        goodstr = `<li class="imgddd"><a href=""><img src="img/contbig${i}.jpg" alt="" id="imgddd"></a></li>`;
        for (var j = res.length-1; j >res.length-7; j--) {
          goodstr += `<li goodid=${res[j].id}><a href="./detail.html?id=${res[j].id}"><img src=${res[j].imgs[0]} alt=""><p>${res[j].name}</p></a><span>￥${res[j].price}</span></li>`;
        }
        $(".cont1")[i].innerHTML = goodstr;
      }
      for (var i = 0; i < $(".cont2").length; i++) {
        goodstr = "";
        for (var j = 0; j < 8; j++) {
          goodstr += `<li goodid=${res[j].id}><a href="./detail.html?id=${res[j].id}"><img src=${res[j].imgs[0]} alt=""><p>${res[j].name}</p></a><span>￥${res[j].price}</span></li>`;
        }
        $(".cont2")[i].innerHTML = goodstr;
      }
    }
  });

  // 轮播图
  const imgJson = [
    { src: "./img/banner1.jpg" },
    { src: "./img/banner2.jpg" },
    { src: "./img/banner3.jpg" },
    { src: "./img/banner1.jpg" },
    { src: "./img/banner2.jpg" },
    { src: "./img/banner3.jpg" },
  ];
  $("#banner-wrap").banner({
    items: imgJson,
    btn: true,
    list: false,
    autoPlay: true,
    delayTime: 2000,
    moveTime: 500,
    index: 0,
    activeStyle: {
      background: "#c70019",
      color: "#fff",
    },
  });
  // 选项卡
  class Choosecard {
    constructor(obj) {
      this.cards = obj.cards;
      this.chocards = obj.chocards;
      this.addEvent();
    }
    addEvent() {
      const that =this
      $(window).on("load", () => {
        that.chocards[1].style.display = "none";
        that.chocards[2].style.display = "none";
      });
      this.cards.onclick = function (eve) {
        if(eve.target.tagName==="LI"){
          for(var i=0;i<that.chocards.length;i++){
            that.chocards[i].style.display = "none";
          }
          that.chocards[eve.target.getAttribute("index")].style.display = "block"
        }
      };
    }
  }
  new Choosecard({
    cards: document.querySelector(".cards"),
    chocards: document.querySelectorAll(".choosecard"),
  });

  // 爬楼
  class Floor {
    constructor(obj) {
      this.eles = obj.eles;
      this.fljm = obj.fljm;
      this.render();
    }
    render() {
      const that = this;
      window.addEventListener("load", function () {
        that.fljm.style.top = document.documentElement.clientHeight / 2 + "px";
      });
      let arr = [];
      let herfarr = [];
      var toparr = [];
      for (var i = 0; i < this.eles.length; i++) {
        arr.push(this.eles[i].firstElementChild.firstElementChild.innerText);
        toparr.push(this.eles[i].offsetTop);
        herfarr.push(this.eles[i].id);
      }
      toparr.push(this.eles[this.eles.length - 1].offsetTop + 500);
      for (var i = 0; i < this.eles.length; i++) {
        let a = document.createElement("a");
        a.innerHTML = arr[i];
        a.href = "#" + herfarr[i];
        this.fljm.appendChild(a);
      }
      window.addEventListener("scroll", function () {
        var scrollH = document.documentElement.scrollTop;
        if (scrollH > toparr[0] && scrollH < toparr[toparr.length - 1]) {
          that.fljm.style.display = "block";
          for (var i = 0; i < that.eles.length; i++) {
            if (scrollH > toparr[i] && scrollH < toparr[i + 1]) {
              for (var j = 0; j < that.eles.length; j++) {
                that.fljm.children[j].style.backgroundColor = "white";
              }
              that.fljm.children[i].style.backgroundColor = "green";
            }
          }
        } else {
          that.fljm.style.display = "none";
        }
      });
    }
  }

  new Floor({
    eles: document.querySelectorAll(".floors"),
    fljm: document.querySelector("#floor_jump"),
  });

  // 商品分楼顶部切换效果和分楼内部图片动画
  class Switch {
    constructor(obj) {
      this.ele = obj.ele;
      this.conts = obj.conts;
      this.addEvent();
    }
    addEvent() {
      const that = this;
      for (var i = 0; i < this.ele.length; i++) {
        this.ele[i].onmouseover = function () {
          this.parNext = this.parentNode.nextElementSibling.children;
          this.style.borderBottom ="3px solid " + getComputedStyle(this.parentNode.children[0]).color;
          if (this.nextElementSibling) {
            this.nextElementSibling.style.borderBottom = "none";
            this.parNext[1].style.zIndex = "1";
            this.parNext[2].style.zIndex = "-1";
          } else {
            this.previousElementSibling.style.borderBottom = "none";
            this.parNext[2].style.zIndex = "1";
            this.parNext[1].style.zIndex = "-1";
          }
        };
      }

      for (var i = 0; i < this.conts.length; i++) {
        this.conts[i].onmouseover = function (eve) {
          const e = eve || window.event;
          const target = e.target || e.toElememt || ee.srcElement;
          if (target.id === "imgddd") return;
          if (target.tagName === "IMG") {
            move(target, { marginLeft: 50, marginRight: 10 });
            target.nextElementSibling.style.color = "lightgreen";
            target.onmouseleave = function () {
              move(target, { marginLeft: 30, marginRight: 30 });
              target.nextElementSibling.style.color = "black";
            };
          }
        };
      }
    }
  }

  new Switch({
    ele: document.querySelectorAll(".floors header span"),
    conts: document.getElementsByClassName("cont"),
  });
})();
